// @/components/renderers/RaColorPickerRender.js (或 .jsx)

import { VxeUI } from 'vxe-pc-ui';
import { ElColorPicker } from 'element-plus';
import { get } from 'lodash-es';

VxeUI.renderer.add('RaColorPickerRender', {
  renderDefault(renderOpts, params) {
    const { row, column } = params;
    const field = column.field;
    const cellValue = row[field]; // 安全地获取颜色值，例如 '#409EFF'

    // 如果值为空，则不显示任何内容或显示占位符
    if (!cellValue) {
      return <span>-</span>;
    }

    // 创建一个内联样式的小方块来预览颜色
    const colorBlockStyle = {
      display: 'inline-block',
      width: '20px',
      height: '20px',
      backgroundColor: cellValue,
      verticalAlign: 'middle',
      marginRight: '8px',
      border: '1px solid #dcdfe6',
      borderRadius: '4px',
    };

    return (
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <span style={colorBlockStyle}></span>
        <span>{cellValue}</span>
      </div>
    );
  },

  renderEdit(renderOpts, params) {
    const { row, column, $table } = params;
    const { props = {} } = renderOpts;
    const field = column.field;
    const cellValue = get(row, field);

    const updateCellValue = (newColor) => {
      set(row, field, newColor);
    };

    // 使用 ElColorPicker 组件作为编辑器
    return (
      <ElColorPicker
        modelValue={cellValue}
        onActiveChange={updateCellValue}
        onChange={updateCellValue}
        {...props}
      />
    );
  },
});

export default 'RaArrayTagsRender';
